<!-- // 获取当前属性 -->
<template>
  <div>
    <el-card>
      <template #header>
        <span class="title-span">API基础信息</span>
      </template>
      <!-- // 两个输入框  一个是名称  一个是描述 -->
      <el-form label-width="100">
        <el-form-item label="节点名称：">
          <el-input v-model="props.showFlowData.data.label"></el-input>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input v-model="props.showFlowData.data.desc" type="textarea"></el-input>
        </el-form-item>
      </el-form>
    </el-card>


    <el-card style="margin-top: 10px;">
      <template #header>
        <span class="title-span">API状态</span>
      </template>
      <el-form label-width="100">
        <el-form-item label="名称：">
          <el-input v-model="popShowData.APIState.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-input v-model="popShowData.APIState.type" disabled></el-input>
        </el-form-item>
      </el-form>
    </el-card>


    <el-card style="margin-top: 10px;">
      <template #header>
        <span class="title-span">API输入</span>
      </template>
      <div>
        <el-form label-width="100">
          <el-form-item label="名称：">
            <el-input v-model="popShowData.APIInput.dataOne.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="类型：">
            <el-input v-model="popShowData.APIInput.dataOne.type" disabled></el-input>
          </el-form-item>
          <el-form-item label="值：">
            <el-select v-model="popShowData.APIInput.dataOne.selectValue">
              <el-option value="0" label="当前打开数据"></el-option>
              <el-option value="1" label="选择文件"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card style="margin-top: 10px;">
      <template #header>
        <span class="title-span">API输出</span>
      </template>
      <el-form label-width="100">
        <el-form-item label="名称：">
          <el-input v-model="popShowData.APIOutput.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-input v-model="popShowData.APIOutput.type" disabled></el-input>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, defineProps, onMounted, watch, onUnmounted } from 'vue';
import flowNodesStore from '@/store/modules/flowNodes'
import { requiredDetection } from '../utils/methodName'
const { proxy } = getCurrentInstance();
const flowNodes = flowNodesStore()
const props = defineProps({
  // Define props here
  showFlowData: {
    type: Object,
  },
  drawer: {
    type: Boolean,
  },
  recapture: {
    type: Boolean
  },
  inputSelectNodeIds: {
    type: Array
  }
});


const popShowData = ref({
  APIBaseData: {
    name: '获取当前数据',
    desc: '获取当前窗口打开的3D数据',
  },
  APIState: {
    name: '成功',
    type: '布尔'
  },
  APIInput: {
    dataOne: {
      name: '数据来源',
      type: '枚举',
      selectValue: '0',
    },
  },
  APIOutput: {
    name: '3D数据',
    type: '3D文档'
  },
})

const node_data = computed(() => {
  let obj = {
    positionFlag: props.showFlowData.data.positionFlag, // 是否开始结束节点
    methodName: props.showFlowData.data.methodName,
    input3DData: props.showFlowData.id,
    type: popShowData.value.APIInput.dataOne.selectValue,
  }
  return obj;
});

// watch(() => props.drawer, (val) => {
//   if (!val) {
//     setData();// 更新数据
//   }
// }, { deep: true }, { immediate: true })

watch(() => popShowData.value, (val) => {
  if (val) {
    setData();// 更新数据
  }
}, { deep: true }, { immediate: true })


watch(() => props.recapture, (val) => {
  reset();
  getList();
}, { deep: true }, { immediate: true })


onMounted(() => {
  getList();
  setData();
})

// onUnmounted(() => {
//   if(requiredDetection(node_data.value)) {
//     proxy.$modal.confirm(`请检查"${props.showFlowData.data.label}"节点是否填写完整`);
//   }
// })

const getList = () => {
  if (props.showFlowData.id) {
    if (flowNodes.getFlowNodesById(props.showFlowData.id)) {
      let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
      if (nodeData.data.popShowData) {
        popShowData.value = JSON.parse(JSON.stringify(nodeData.data.popShowData))
      } else {
        reset();
      }
    }
  }
}

const setData = () => {
  let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
  // 如果找到了该节点，则更新数据
  if (nodeData) {
    // nodeData.data.popShowData = popShowData.value
    nodeData.data.popShowData = JSON.parse(JSON.stringify(popShowData.value))
    nodeData.data.data = node_data.value
    flowNodes.setFlowNodesById(props.showFlowData.id, nodeData)
  }
}

const reset = () => {
  popShowData.value = {
    APIBaseData: {
      name: '获取当前数据',
      desc: '获取当前窗口打开的3D数据',
    },
    APIState: {
      name: '成功',
      type: '布尔'
    },
    APIInput: {
      dataOne: {
        name: '数据来源',
        type: '枚举',
        selectValue: '0',
      },
    },
    APIOutput: {
      name: '3D数据',
      type: '3D文档'
    },
  }
}
</script>

<style scoped>
/* Your component styles go here */
</style>